/**
 * 品牌页品牌弹框组件
 */
<script setup>
import { ref } from 'vue'
import { useBrandStore } from '@/stores/brand'

const brandStore = useBrandStore()

const brand = ref('')

function beforeOpen() {
  brand.value = ''
}

function afterClose() {
  brand.value = ''
}
</script>

<template>
  <div id="brand-brand-popup">
    <el-dialog
      v-model="brandStore.isShow"
      title="品牌客户"
      top="5vh"
      width="70vw"
      center
      @open="beforeOpen"
      @afterClose="afterClose"
    >
      <div class="brand-select">
        <el-input
          v-model="brand"
          size="large"
          placeholder="请输入品牌"
        ></el-input>
      </div>

      <div class="brand-option">
        <TransitionGroup name="fade">
          <RouterLink
            v-for="item in brandStore.getData()"
            :key="item.brand_no"
            v-show="item.brand_no.includes(brand.toUpperCase())"
            :to="{ name: 'brand', query: { brand: item.brand_no } }"
            @click="brandStore.hidden()"
            class="brand-option-item"
            :style="{ background: item.color == 'Y' ? 'linear-gradient(to right bottom, #2f65ba, #6e41be)' : 'gray' }"
          >
            <span class="brand-option-no">
              {{ item.brand_no }}
            </span>

            <span class="brand-option-desc">
              {{ item.brand_desc }}
            </span>
          </RouterLink>
        </TransitionGroup>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#brand-brand-popup {
  --el-color-primary: green;
  --el-bg-color: rgba(45, 54, 83, 0.8);

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .brand-select {
    width: 25%;
    margin-left: 1%;
    margin-bottom: 1%;
  }

  &:deep(.el-input__wrapper) {
    background-color: black;
  }

  &:deep(.el-input__inner) {
    color: #ccc;
  }

  .brand-option {
    max-height: 72vh;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;

    .brand-option-item {
      width: 18%;
      height: 20vh;
      margin: 1%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-radius: 2vh;
      transition: all 0.25s ease-in-out;

      &:hover {
        box-shadow: 0 0 10px white;
        filter: hue-rotate(15deg) saturate(200%);
      }

      .brand-option-no {
        color: white;
        font-size: 8vh;
        font-weight: normal;
        margin-top: 10%;
        margin-bottom: 5%;
      }

      .brand-option-desc {
        max-width: 100%;
        color: white;
        font-size: 2vh;
        font-weight: normal;
        text-align: center;
        overflow-wrap: break-word;
      }
    }
  }

  .fade-enter-active, .fade-leave-active, .fade-move {
    transition: all 0.25s ease-in-out;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to, .fade-leave-from {
    opacity: 1;
  }

  .fade-leave-active {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>